<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>设置 - 暖言树洞</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
    <div class="page">
        <!-- Header -->
        <div class="page-header">
            <button class="header-back">
                <i class="fas fa-arrow-left"></i>
            </button>
            <h1 class="header-title">设置</h1>
            <div class="text-sm text-neutral-600">个性化配置</div>
        </div>

        <!-- Main Content -->
        <div class="page-content">
            <!-- Profile Settings -->
            <div class="card mb-6">
                <h3 class="font-semibold mb-4 flex items-center">
                    <i class="fas fa-user mr-2 text-primary"></i>
                    个人设置
                </h3>
                
                <div class="setting-item" onclick="editNickname()">
                    <div class="flex items-center">
                        <i class="fas fa-edit text-primary mr-3"></i>
                        <div class="flex-1">
                            <div class="font-medium text-sm">修改昵称</div>
                            <div class="text-xs text-neutral-500">当前：暖心用户</div>
                        </div>
                    </div>
                    <i class="fas fa-chevron-right text-neutral-400"></i>
                </div>

                <div class="setting-item" onclick="changeAvatar()">
                    <div class="flex items-center">
                        <i class="fas fa-image text-secondary mr-3"></i>
                        <div class="flex-1">
                            <div class="font-medium text-sm">更换头像</div>
                            <div class="text-xs text-neutral-500">选择你喜欢的AI猫猫</div>
                        </div>
                    </div>
                    <i class="fas fa-chevron-right text-neutral-400"></i>
                </div>

                <div class="setting-item" onclick="viewMyData()">
                    <div class="flex items-center">
                        <i class="fas fa-chart-bar text-info-500 mr-3"></i>
                        <div class="flex-1">
                            <div class="font-medium text-sm">我的数据</div>
                            <div class="text-xs text-neutral-500">查看详细统计信息</div>
                        </div>
                    </div>
                    <i class="fas fa-chevron-right text-neutral-400"></i>
                </div>
            </div>

            <!-- Privacy Settings -->
            <div class="card mb-6">
                <h3 class="font-semibold mb-4 flex items-center">
                    <i class="fas fa-shield-alt mr-2 text-success-500"></i>
                    隐私设置
                </h3>

                <div class="setting-item">
                    <div class="flex items-center">
                        <i class="fas fa-paper-plane text-info-500 mr-3"></i>
                        <div class="flex-1">
                            <div class="font-medium text-sm">日记漂流</div>
                            <div class="text-xs text-neutral-500">允许日记参与漂流系统</div>
                        </div>
                    </div>
                    <label class="toggle-switch">
                        <input type="checkbox" checked id="allowDrift">
                        <span class="toggle-slider"></span>
                    </label>
                </div>

                <div class="setting-item">
                    <div class="flex items-center">
                        <i class="fas fa-user-secret text-warning-500 mr-3"></i>
                        <div class="flex-1">
                            <div class="font-medium text-sm">完全匿名</div>
                            <div class="text-xs text-neutral-500">不显示任何个人标识</div>
                        </div>
                    </div>
                    <label class="toggle-switch">
                        <input type="checkbox" checked id="fullAnonymous">
                        <span class="toggle-slider"></span>
                    </label>
                </div>

                <div class="setting-item">
                    <div class="flex items-center">
                        <i class="fas fa-eye text-neutral-500 mr-3"></i>
                        <div class="flex-1">
                            <div class="font-medium text-sm">AI数据分析</div>
                            <div class="text-xs text-neutral-500">用于改善AI回复质量</div>
                        </div>
                    </div>
                    <label class="toggle-switch">
                        <input type="checkbox" checked id="aiAnalysis">
                        <span class="toggle-slider"></span>
                    </label>
                </div>

                <div class="setting-item" onclick="showPrivacyPolicy()">
                    <div class="flex items-center">
                        <i class="fas fa-file-alt text-primary mr-3"></i>
                        <div class="flex-1">
                            <div class="font-medium text-sm">隐私政策</div>
                            <div class="text-xs text-neutral-500">了解我们如何保护您的隐私</div>
                        </div>
                    </div>
                    <i class="fas fa-chevron-right text-neutral-400"></i>
                </div>
            </div>

            <!-- Notification Settings -->
            <div class="card mb-6">
                <h3 class="font-semibold mb-4 flex items-center">
                    <i class="fas fa-bell mr-2 text-warning-500"></i>
                    通知设置
                </h3>

                <div class="setting-item">
                    <div class="flex items-center">
                        <i class="fas fa-robot text-primary mr-3"></i>
                        <div class="flex-1">
                            <div class="font-medium text-sm">AI回复提醒</div>
                            <div class="text-xs text-neutral-500">AI猫猫回复时通知</div>
                        </div>
                    </div>
                    <label class="toggle-switch">
                        <input type="checkbox" checked id="aiReplyNotif">
                        <span class="toggle-slider"></span>
                    </label>
                </div>

                <div class="setting-item">
                    <div class="flex items-center">
                        <i class="fas fa-comment text-secondary mr-3"></i>
                        <div class="flex-1">
                            <div class="font-medium text-sm">点评通知</div>
                            <div class="text-xs text-neutral-500">收到他人点评时通知</div>
                        </div>
                    </div>
                    <label class="toggle-switch">
                        <input type="checkbox" checked id="commentNotif">
                        <span class="toggle-slider"></span>
                    </label>
                </div>

                <div class="setting-item">
                    <div class="flex items-center">
                        <i class="fas fa-star text-warning-500 mr-3"></i>
                        <div class="flex-1">
                            <div class="font-medium text-sm">精选通知</div>
                            <div class="text-xs text-neutral-500">日记入选精选时通知</div>
                        </div>
                    </div>
                    <label class="toggle-switch">
                        <input type="checkbox" checked id="featuredNotif">
                        <span class="toggle-slider"></span>
                    </label>
                </div>

                <div class="setting-item">
                    <div class="flex items-center">
                        <i class="fas fa-gift text-success-500 mr-3"></i>
                        <div class="flex-1">
                            <div class="font-medium text-sm">公益项目更新</div>
                            <div class="text-xs text-neutral-500">参与项目的进度通知</div>
                        </div>
                    </div>
                    <label class="toggle-switch">
                        <input type="checkbox" checked id="charityNotif">
                        <span class="toggle-slider"></span>
                    </label>
                </div>
            </div>

            <!-- App Settings -->
            <div class="card mb-6">
                <h3 class="font-semibold mb-4 flex items-center">
                    <i class="fas fa-mobile-alt mr-2 text-info-500"></i>
                    应用设置
                </h3>

                <div class="setting-item" onclick="changeTheme()">
                    <div class="flex items-center">
                        <i class="fas fa-palette text-primary mr-3"></i>
                        <div class="flex-1">
                            <div class="font-medium text-sm">主题模式</div>
                            <div class="text-xs text-neutral-500">当前：暖色模式</div>
                        </div>
                    </div>
                    <i class="fas fa-chevron-right text-neutral-400"></i>
                </div>

                <div class="setting-item" onclick="changeFontSize()">
                    <div class="flex items-center">
                        <i class="fas fa-font text-secondary mr-3"></i>
                        <div class="flex-1">
                            <div class="font-medium text-sm">字体大小</div>
                            <div class="text-xs text-neutral-500">当前：标准</div>
                        </div>
                    </div>
                    <i class="fas fa-chevron-right text-neutral-400"></i>
                </div>

                <div class="setting-item">
                    <div class="flex items-center">
                        <i class="fas fa-wifi text-info-500 mr-3"></i>
                        <div class="flex-1">
                            <div class="font-medium text-sm">仅WiFi下漂流</div>
                            <div class="text-xs text-neutral-500">节省移动数据流量</div>
                        </div>
                    </div>
                    <label class="toggle-switch">
                        <input type="checkbox" id="wifiOnly">
                        <span class="toggle-slider"></span>
                    </label>
                </div>

                <div class="setting-item">
                    <div class="flex items-center">
                        <i class="fas fa-volume-up text-warning-500 mr-3"></i>
                        <div class="flex-1">
                            <div class="font-medium text-sm">音效提示</div>
                            <div class="text-xs text-neutral-500">操作时播放提示音</div>
                        </div>
                    </div>
                    <label class="toggle-switch">
                        <input type="checkbox" checked id="soundEffects">
                        <span class="toggle-slider"></span>
                    </label>
                </div>
            </div>

            <!-- Data & Storage -->
            <div class="card mb-6">
                <h3 class="font-semibold mb-4 flex items-center">
                    <i class="fas fa-hdd mr-2 text-neutral-600"></i>
                    数据与存储
                </h3>

                <div class="setting-item" onclick="clearCache()">
                    <div class="flex items-center">
                        <i class="fas fa-trash-alt text-warning-500 mr-3"></i>
                        <div class="flex-1">
                            <div class="font-medium text-sm">清除缓存</div>
                            <div class="text-xs text-neutral-500">释放存储空间 (约 15MB)</div>
                        </div>
                    </div>
                    <i class="fas fa-chevron-right text-neutral-400"></i>
                </div>

                <div class="setting-item" onclick="exportData()">
                    <div class="flex items-center">
                        <i class="fas fa-download text-info-500 mr-3"></i>
                        <div class="flex-1">
                            <div class="font-medium text-sm">导出数据</div>
                            <div class="text-xs text-neutral-500">下载我的日记和数据</div>
                        </div>
                    </div>
                    <i class="fas fa-chevron-right text-neutral-400"></i>
                </div>

                <div class="setting-item" onclick="deleteAccount()">
                    <div class="flex items-center">
                        <i class="fas fa-user-times text-error-500 mr-3"></i>
                        <div class="flex-1">
                            <div class="font-medium text-sm text-error-500">删除账户</div>
                            <div class="text-xs text-neutral-500">永久删除所有数据</div>
                        </div>
                    </div>
                    <i class="fas fa-chevron-right text-neutral-400"></i>
                </div>
            </div>

            <!-- About -->
            <div class="card mb-6">
                <h3 class="font-semibold mb-4 flex items-center">
                    <i class="fas fa-info-circle mr-2 text-primary"></i>
                    关于
                </h3>

                <div class="setting-item" onclick="showAbout()">
                    <div class="flex items-center">
                        <i class="fas fa-heart text-primary mr-3"></i>
                        <div class="flex-1">
                            <div class="font-medium text-sm">关于暖言树洞</div>
                            <div class="text-xs text-neutral-500">版本 1.0.0</div>
                        </div>
                    </div>
                    <i class="fas fa-chevron-right text-neutral-400"></i>
                </div>

                <div class="setting-item" onclick="showUserAgreement()">
                    <div class="flex items-center">
                        <i class="fas fa-file-contract text-secondary mr-3"></i>
                        <div class="flex-1">
                            <div class="font-medium text-sm">用户协议</div>
                            <div class="text-xs text-neutral-500">使用条款和服务协议</div>
                        </div>
                    </div>
                    <i class="fas fa-chevron-right text-neutral-400"></i>
                </div>

                <div class="setting-item" onclick="contactUs()">
                    <div class="flex items-center">
                        <i class="fas fa-envelope text-info-500 mr-3"></i>
                        <div class="flex-1">
                            <div class="font-medium text-sm">联系我们</div>
                            <div class="text-xs text-neutral-500">反馈建议或寻求帮助</div>
                        </div>
                    </div>
                    <i class="fas fa-chevron-right text-neutral-400"></i>
                </div>

                <div class="setting-item" onclick="checkUpdate()">
                    <div class="flex items-center">
                        <i class="fas fa-sync-alt text-success-500 mr-3"></i>
                        <div class="flex-1">
                            <div class="font-medium text-sm">检查更新</div>
                            <div class="text-xs text-neutral-500">查看是否有新版本</div>
                        </div>
                    </div>
                    <i class="fas fa-chevron-right text-neutral-400"></i>
                </div>
            </div>

            <!-- Emergency -->
            <div class="card bg-error-50 border border-error-200">
                <div class="flex items-start">
                    <i class="fas fa-exclamation-triangle text-error-500 mr-3 mt-1"></i>
                    <div class="flex-1">
                        <h4 class="font-medium text-sm text-error-700 mb-2">心理健康支持</h4>
                        <p class="text-xs text-error-600 mb-3 leading-relaxed">
                            如果你正在经历情绪困扰或心理危机，请及时寻求专业帮助。这里有一些资源可以为你提供支持。
                        </p>
                        <button onclick="showEmergencyHelp()" class="btn btn-sm" style="background: var(--error-500); color: white;">
                            <i class="fas fa-phone mr-1"></i>
                            紧急求助
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="js/app.js"></script>
    <script>
        // 设置页面管理器
        class SettingsManager {
            constructor() {
                this.settings = {
                    allowDrift: true,
                    fullAnonymous: true,
                    aiAnalysis: true,
                    aiReplyNotif: true,
                    commentNotif: true,
                    featuredNotif: true,
                    charityNotif: true,
                    wifiOnly: false,
                    soundEffects: true
                };
                this.init();
            }

            init() {
                this.loadSettings();
                this.bindEvents();
                this.initAnimations();
            }

            loadSettings() {
                // 从本地存储加载设置
                const savedSettings = localStorage.getItem('warmthTreeHoleSettings');
                if (savedSettings) {
                    this.settings = { ...this.settings, ...JSON.parse(savedSettings) };
                }
                
                // 更新开关状态
                Object.keys(this.settings).forEach(key => {
                    const toggle = document.getElementById(key);
                    if (toggle) {
                        toggle.checked = this.settings[key];
                    }
                });
            }

            bindEvents() {
                // 绑定开关事件
                const toggles = document.querySelectorAll('.toggle-switch input');
                toggles.forEach(toggle => {
                    toggle.addEventListener('change', (e) => {
                        const settingKey = e.target.id;
                        this.settings[settingKey] = e.target.checked;
                        this.saveSettings();
                        this.handleSettingChange(settingKey, e.target.checked);
                    });
                });
            }

            saveSettings() {
                localStorage.setItem('warmthTreeHoleSettings', JSON.stringify(this.settings));
            }

            handleSettingChange(key, value) {
                const messages = {
                    allowDrift: value ? '已开启日记漂流' : '已关闭日记漂流',
                    fullAnonymous: value ? '已开启完全匿名模式' : '已关闭完全匿名模式',
                    aiAnalysis: value ? '已允许AI数据分析' : '已禁用AI数据分析',
                    aiReplyNotif: value ? '已开启AI回复通知' : '已关闭AI回复通知',
                    commentNotif: value ? '已开启点评通知' : '已关闭点评通知',
                    featuredNotif: value ? '已开启精选通知' : '已关闭精选通知',
                    charityNotif: value ? '已开启公益通知' : '已关闭公益通知',
                    wifiOnly: value ? '已开启仅WiFi模式' : '已关闭仅WiFi模式',
                    soundEffects: value ? '已开启音效提示' : '已关闭音效提示'
                };

                if (messages[key]) {
                    App.utils.showToast(messages[key], 'success');
                }
            }

            initAnimations() {
                const cards = document.querySelectorAll('.card');
                cards.forEach((card, index) => {
                    setTimeout(() => {
                        card.style.animation = 'fadeInUp 0.5s ease forwards';
                    }, index * 100);
                });
            }
        }

        // 全局函数
        function editNickname() {
            const currentNickname = '暖心用户';
            const newNickname = prompt('请输入新的昵称:', currentNickname);
            
            if (newNickname && newNickname.trim() && newNickname !== currentNickname) {
                if (newNickname.length > 20) {
                    App.utils.showToast('昵称不能超过20个字符', 'warning');
                    return;
                }
                
                App.utils.showToast('昵称修改成功!', 'success');
                // 更新显示
                document.querySelector('.setting-item .text-xs').textContent = `当前：${newNickname.trim()}`;
            }
        }

        function changeAvatar() {
            const avatars = ['🐱', '😺', '😸', '😹', '😻', '🙀', '😿', '😾'];
            const avatarList = avatars.map((emoji, index) => 
                `${index + 1}. ${emoji}`
            ).join('\n');
            
            const choice = prompt(`选择你喜欢的AI猫猫头像:\n\n${avatarList}\n\n请输入数字 (1-${avatars.length}):`);
            
            const index = parseInt(choice) - 1;
            if (index >= 0 && index < avatars.length) {
                App.utils.showToast(`头像已更换为 ${avatars[index]}`, 'success');
            } else if (choice) {
                App.utils.showToast('请输入正确的数字', 'warning');
            }
        }

        function viewMyData() {
            App.utils.showToast('跳转到数据统计页面', 'info');
            // 这里可以跳转到详细的数据统计页面
        }

        function changeTheme() {
            const themes = ['暖色模式', '清新模式', '夜间模式', '简约模式'];
            const currentTheme = '暖色模式';
            
            const themeList = themes.map((theme, index) => 
                `${index + 1}. ${theme} ${theme === currentTheme ? '(当前)' : ''}`
            ).join('\n');
            
            const choice = prompt(`选择主题:\n\n${themeList}\n\n请输入数字 (1-${themes.length}):`);
            
            const index = parseInt(choice) - 1;
            if (index >= 0 && index < themes.length) {
                App.utils.showToast(`主题已切换为 ${themes[index]}`, 'success');
                document.querySelector('.setting-item:nth-child(1) .text-xs').textContent = `当前：${themes[index]}`;
            } else if (choice) {
                App.utils.showToast('请输入正确的数字', 'warning');
            }
        }

        function changeFontSize() {
            const sizes = ['小号', '标准', '大号', '特大'];
            const currentSize = '标准';
            
            const sizeList = sizes.map((size, index) => 
                `${index + 1}. ${size} ${size === currentSize ? '(当前)' : ''}`
            ).join('\n');
            
            const choice = prompt(`选择字体大小:\n\n${sizeList}\n\n请输入数字 (1-${sizes.length}):`);
            
            const index = parseInt(choice) - 1;
            if (index >= 0 && index < sizes.length) {
                App.utils.showToast(`字体大小已设置为 ${sizes[index]}`, 'success');
                document.querySelector('.setting-item:nth-child(2) .text-xs').textContent = `当前：${sizes[index]}`;
            } else if (choice) {
                App.utils.showToast('请输入正确的数字', 'warning');
            }
        }

        function clearCache() {
            const confirmed = confirm('确定要清除缓存吗？这将释放约15MB的存储空间。');
            if (confirmed) {
                // 模拟清除缓存
                App.utils.showToast('正在清除缓存...', 'info');
                setTimeout(() => {
                    App.utils.showToast('缓存清除成功！释放了15MB空间', 'success');
                }, 1500);
            }
        }

        function exportData() {
            const confirmed = confirm('确定要导出你的个人数据吗？包括日记、点评等信息。');
            if (confirmed) {
                App.utils.showToast('正在准备数据...', 'info');
                setTimeout(() => {
                    App.utils.showToast('数据导出完成！文件已保存到下载文件夹', 'success');
                }, 2000);
            }
        }

        function deleteAccount() {
            const warning = '⚠️ 危险操作警告\n\n删除账户将永久清除:\n• 所有日记和点评\n• 暖心币和公益记录\n• 个人设置和数据\n\n此操作不可逆转！';
            
            if (confirm(warning)) {
                const finalConfirm = prompt('请输入 "删除账户" 来确认操作:');
                if (finalConfirm === '删除账户') {
                    App.utils.showToast('账户删除申请已提交，将在7天后生效', 'info');
                } else if (finalConfirm) {
                    App.utils.showToast('输入不正确，操作已取消', 'warning');
                }
            }
        }

        function showPrivacyPolicy() {
            const policy = `🔒 隐私保护承诺

我们严格保护您的隐私和数据安全：

✅ 端到端加密保护
✅ 隐私计算技术
✅ 最小化数据收集
✅ 完全匿名化处理
✅ 不出售个人信息
✅ 透明的数据使用

您的信任是我们最宝贵的财富。`;

            alert(policy);
        }

        function showAbout() {
            const about = `💝 关于暖言树洞

版本：1.0.0
开发者：MiniMax Team

暖言树洞是一个结合AI技术和隐私计算的温暖社交平台，致力于：

🌟 为每个人提供情感支持
🛡️ 保护用户隐私安全  
🤝 连接温暖的心灵
🌍 传递公益正能量

让科技传递温暖，让善意改变世界。`;

            alert(about);
        }

        function showUserAgreement() {
            App.utils.showToast('跳转到用户协议页面', 'info');
        }

        function contactUs() {
            const contact = `📧 联系我们

客服邮箱：support@warmthtree.com
反馈电话：400-888-6666
工作时间：9:00-18:00 (工作日)

微信客服：搜索 "暖言树洞客服"
QQ群：123456789

我们重视每一个用户的声音！`;

            alert(contact);
        }

        function checkUpdate() {
            App.utils.showToast('正在检查更新...', 'info');
            setTimeout(() => {
                App.utils.showToast('当前已是最新版本 v1.0.0', 'success');
            }, 1500);
        }

        function showEmergencyHelp() {
            const emergency = `🆘 心理健康支持热线

全国心理危机干预热线：
📞 400-161-9995 (24小时)

青少年心理咨询热线：
📞 12355 (24小时)

抑郁症防治热线：
📞 400-648-1168

北京市心理危机干预热线：
📞 400-161-9995

请记住：你不是一个人在战斗，
总有人愿意倾听和帮助你。

生命很珍贵，请珍惜自己。💙`;

            alert(emergency);
        }

        // 页面初始化
        let settingsManager;
        
        document.addEventListener('DOMContentLoaded', function() {
            settingsManager = new SettingsManager();
        });
    </script>

    <style>
        /* 设置项样式 */
        .setting-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: var(--spacing-4);
            border-bottom: 1px solid var(--neutral-200);
            cursor: pointer;
            transition: background-color var(--transition-normal);
        }

        .setting-item:last-child {
            border-bottom: none;
        }

        .setting-item:hover {
            background-color: var(--neutral-50);
        }

        /* 切换开关样式 */
        .toggle-switch {
            position: relative;
            display: inline-block;
            width: 44px;
            height: 24px;
        }

        .toggle-switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }

        .toggle-slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: var(--neutral-300);
            transition: 0.3s;
            border-radius: 24px;
        }

        .toggle-slider:before {
            position: absolute;
            content: "";
            height: 18px;
            width: 18px;
            left: 3px;
            bottom: 3px;
            background-color: white;
            transition: 0.3s;
            border-radius: 50%;
        }

        input:checked + .toggle-slider {
            background-color: var(--primary-500);
        }

        input:checked + .toggle-slider:before {
            transform: translateX(20px);
        }

        /* 文字样式 */
        .font-medium {
            font-weight: 500;
        }

        /* 边框样式 */
        .border {
            border-width: 1px;
            border-style: solid;
        }

        .border-error-200 {
            border-color: var(--error-200);
        }

        /* 响应式调整 */
        @media (max-width: 640px) {
            .setting-item {
                padding: var(--spacing-3);
            }
            
            .setting-item i {
                font-size: 0.875rem;
            }
            
            .font-medium {
                font-size: 0.875rem;
            }
        }
    </style>
</body>
</html>
